{% extends theme("base.html") %}
{% block content %}
    <div class="container">
        <blockquote class="text-center">
            <h1><strong>生有尽，而学无涯！</strong></h1>

            <h3>在我们生活欺骗了你</h3>

            <h3>不要悲伤</h3>

            <h3>不要心急</h3>

            <h3>你需要的是看书~</h3>

            <hr/>
            <p class="h4 text-right">------------ GOLSEE ----------</p>
        </blockquote>
        <h4>很多搞技术的，都希望自己的经验又一个堆积的地方，那就是我们的 BLOG </h4>
        <h4>此程序正是我自敲的 BLOG 了</h4>
        <h4>第一次敲代码，肯定写的不怎么样。附上项目地址,供大家参考！
            <a href="https://git.oschina.net/gooken/golsee.git">
                <i class="glyphicon glyphicon-hand-right"> 猛点进入</i></a>
        </h4>
        <h4>此程序</h4>
        <h4>前端:
            <strong>
                <a href="http://www.bootcss.com/">
                    Bootstrap
                </a>
            </strong>
            以及 Bootstrap相关一些插件
        </h4>
        <h4>后端:
            <strong>
                <a href="http://flask.pocoo.org/">
                    FLASK
                </a>
            </strong>||
            <strong>
                <a href="http://pythonhosted.org/Flask-SQLAlchemy">
                    Flask-SQLAlchemy
                </a>
            </strong>||
            <strong>
                <a href="http://flask-wtf.readthedocs.org/">
                    Flask-WTF
                </a>
            </strong>||
            <strong>
                <a href="http://flask-login.readthedocs.org/en/latest/">
                    Flask-Login
                </a>
            </strong>||
            <strong>
                <a href="https://github.com/cyberdelia/flask-mysql">
                    Flask-Mysql
                </a>
            </strong>
        </h4>
        <h4>数据库：<strong>
            <a href="http://www.mysql.com/">
                Mysql
            </a>
        </strong>
        </h4>
        <h4>全文搜索：<strong>
            <a href="https://github.com/gyllstromk/Flask-WhooshAlchemy">
                Flask-WhooshAlchemy
            </a>
        </strong>
            <i class="h5">ps:中文分词有待优化啊~</i>
        </h4>
        <h4>评论系统：
            <strong>
                <a href="http://www.uyan.cc/">
                    有言
                </a>
            </strong>
            <i class="h5">ps:后期会考虑自己写评论，自己写的才是完全可控的。好吧，我有强迫症。</i>
        </h4>
        <h4 class="text-danger">关于后台：
            <strong>
                暂时开放后台查看权限，但是需要注册。
            </strong>
        </h4>
        <h4>干了这么久运维，有点想搞开发了……</h4>

        <h2>YES,I CAN!</h2>
        <hr/>
        <div id="visit" style="height:400px"></div>
        <hr/>
        <div id="cagetory" style="height:400px"></div>
    </div>
    <form method="post" action="/">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    </form>
{% endblock %}
{% block script %}
    {{ super() }}
    <script type="text/javascript"
            src="{{ url_for('static', filename='ext/echarts-2.1.8/build/dist/echarts-all.js') }}"></script>
    <script type="text/javascript">
        //访问量
        var myChart = echarts.init(document.getElementById('visit'));
        myChart.showLoading({text: '读取中……'});
        $.ajax({
            url: '{{ url_for('api.visit_json') }}',
            type: "get",
            async: true,
            dataType: "json",
            success: function (data) {
                myChart.hideLoading();
                option = {
                    title: {
                        text: '博客访问统计',
                        subtext: '15天',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['访问量', '恶意访问量', '机器人访问量', '实际访问量'],
                        x: 'left'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: data.labels
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '访问量',
                            type: 'line',
                            data: data.visit,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            }
                        },
                        {
                            name: '恶意访问量',
                            type: 'line',
                            data: data.attack
                        },
                        {
                            name: '机器人访问量',
                            type: 'line',
                            data: data.robot
                        },
                        {
                            name: '实际访问量',
                            type: 'line',
                            data: data.real
                        }
                    ]
                };
                myChart.setOption(option);
            }
        })
        ;
    </script>
    <script type="text/javascript">
        //访问量
        var myChart1 = echarts.init(document.getElementById('cagetory'));
        myChart1.showLoading({text: '读取中……'});
        $.ajax({
            url: '{{ url_for('api.article_json') }}',
            type: "get",
            async: true,
            dataType: "json",
            success: function (data) {
                myChart1.hideLoading();
                option = {
                    title: {
                        text: '博文分类统计',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        x: 'left',
                        orient: 'vertical',
                        data: data.labels
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: [30, 110],
                            roseType: 'area',
                            x: '50%',               // for funnel
                            max: 40,                // for funnel
                            sort: 'ascending',     // for funnel
                            data: eval(data.datas)
                        }
                    ]
                };
                myChart1.setOption(option);
            }
        })
        ;
    </script>
{% endblock %}